Sigma Web Development

📒 Notes for Lecture 21: CSS Specificity Deep Dive

In this lecture, we’ll learn how CSS specificity determines which rules win when multiple selectors target the same element. We’ll cover:

• The specificity ranking: inline > ID > class/attribute/pseudo-class > element/pseudo-element > universal.
• How equal-specificity rules resolve based on order of appearance.
• Using !important to override even inline styles.
• Practical demos across six HTML files to see each case in action:
• element.html – Element vs. universal selector.
• classattribute.html – Class selectors vs. attribute selector with equal specificity.
• idselector.html – ID vs. class vs. element selectors.
• importance.html – !important overriding all specificity.
• inline.html – Inline style overriding ID, class, and element.
• universal.html – Universal selector vs. element selector.

1. element.html

• English Explanation: In element.html, two rules target the same h1. The universal selector * { color: gray; } applies gray to all elements, but the element selector h1 { color: tomato; background-color: black; } has higher specificity (0,0,0,1) than the universal selector (0,0,0,0). Therefore, headings render in tomato on black, overriding gray.

2. classattribute.html

• English Explanation: In classattribute.html, three class selectors (.h1, .cred, .cpurple) and one attribute selector ([data-x="a"]) all have the same specificity (0,0,1,0). When specificity ties, the rule declared last wins. Here, the attribute selector is last in the stylesheet, so its color: aqua; background-color: red; styling overrides the earlier class-based colors.

3. idselector.html

• English Explanation: In idselector.html, several selectors compete:
  • Universal (* { color: gray; }, specificity 0,0,0,0)
  • Element (h1 { color: pink; }, specificity 0,0,0,1)
  • Class (.h1 { color: blue; }, specificity 0,0,1,0)
  • ID (#title { color: red; }, specificity 0,1,0,0)
  ID selectors (0,1,0,0) outrank class (0,0,1,0) and element (0,0,0,1). Therefore, the heading renders red because the ID rule overrides the others.

4. importance.html

• English Explanation: In importance.html, two p rules both target paragraphs. The second block uses !important on every property:

  p {
      color: red !important;
      font-size: 25px !important;
      background-color: yellow !important;
  }

  This gives it effective specificity of 10,000, overriding the earlier rule p { color: blue; }. As a result, all paragraphs appear red on yellow, ignoring the first rule.

5. inline.html

• English Explanation: In inline.html, several selectors compete:
  • Universal (* { color: gray; }, specificity 0,0,0,0)
  • ID (#title { color: red; background-color: yellow; }, specificity 0,1,0,0)
  • Class (.h1 { color: blue; }, specificity 0,0,1,0)
  • Element (h1 { color: pink; }, specificity 0,0,0,1)
  The h1 tag also has an inline style attribute:

  …

  Inline style has specificity (1,0,0,0), which outranks the ID selector (0,1,0,0). Therefore, the heading appears aqua on blueviolet.

6. universal.html

• English Explanation: In universal.html, two rules compete:
  • Universal selector: * { color: gray; background-color: blue; } (specificity 0,0,0,0)
  • Paragraph selector: p { color: white; background-color: black; font-size: 25px; } (specificity 0,0,0,1)
  The paragraph selector (0,0,0,1) outranks universal (0,0,0,0), so paragraphs appear white on black. The h1 has no specific rule, so it inherits the universal styling (gray on blue).

7. main.html (Combined Demo)

• English Explanation: In main.html, all six demos (element.html, classattribute.html, idselector.html, importance.html, inline.html, and universal.html) are embedded together in a single page for side-by-side comparison. Each section demonstrates the specificity rules in one viewport, making it easy to observe how different rules interact simultaneously.